<template>
  <div id="login">
 
    <el-card class="box" shadow="always">
    <el-tabs type="border-card" :stretch='true' >
  <el-tab-pane label="登录">
    <el-form :model="forms"  label-width="100px" status-icon :rules="rules" ref="ruleForm">
      <el-form-item label="用户名" prop="username">
        <el-input  v-model="forms.username"  prefix-icon="el-icon-user-solid" clearable  placeholder="请输入内容"  >
         </el-input>
      </el-form-item>
       <el-form-item label="密码" prop="password">
            <el-input  v-model="forms.password"   placeholder="请输入内容"  prefix-icon="el-icon-s-goods" clearable autocomplete="new-password" show-password >
            
            </el-input> 
       </el-form-item>
        
        <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item> 
  </el-form>
  


  </el-tab-pane>
  <el-tab-pane label="注册">注册</el-tab-pane>
 
</el-tabs>
    </el-card>
  
 
  
 
  </div>
</template>
<script>


export default {
  name:'Login',
  created(){

  },
  data() {
    
    return{
      forms:{
        username:'admin',
        password:'123456'

      },

      rules: {
           username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 8, message: '长度在 3 到 8个字符', trigger: 'blur' }
          

          ],
           password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
         
          ],
        
        }
    }
  },
   methods: {
      submitForm(ruleForm) {
         this.$refs[ruleForm].validate(  (valid) => {
        // valid表示布尔
        // console.log(valid);
      //  如果表单验证失败则停止运行
        if (!valid) return;
       
// 发起axios
 this.$http.post('login',this.forms).then((res)=>{

if (res.data.meta.status!==200) {
  
  // message提示
     this.$message.error('用户错了哦，');
}else{
   // message提示
  this.$message.success('恭喜你，登录成功');
  // 存token
window.sessionStorage.setItem("token",res.data.data.token)
// 导航跳转
this.$router.push("/home")

}
})


      });
      // 、下面
      },

      resetForm(ruleForm) {
        this.$refs[ruleForm].resetFields();
         
    
    }
      
      // 、、、、、、、、、、、、、
    }
}
</script>


<style lang="less" scoped>
#login{
  width: 100%;
  height: 100%;
  background-color: rgb(21, 173, 123);
}
.box{
  width: 600px;
  height: 600px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.el-card{
background-image: url('../../public/a3.jpg');
border: 0;
}
.el-form{
  margin-top: 150px;
  margin-bottom: 150px;
}

</style>
